<template>
  <view class="chessboard">
    <view class="board-container">
      <view class="row" v-for="(_, row) in 8" :key="row">
        <view class="square" 
              v-for="(_, col) in 8" 
              :key="col"
              :class="[
                (row + col) % 2 === 0 ? 'square--white' : 'square--black',
                isSquareSelected(row, col) ? 'square-selected-highlight' : '',
                isMovePossible(row, col) ? 'square--possible' : '',
                isKingInCheck(row, col) ? 'square--check' : ''
              ]"
              @tap.stop="onSquareClick(row, col)"
              @touchstart.native.prevent>
          <view v-if="isMovePossible(row, col)" class="possible-move-indicator"></view>
          <view v-if="isKingInCheck(row, col)" class="king-check-alert"></view>
          <template v-if="localBoardMatrix[row][col]">
            <image class="piece"
                   :class="[
                     isPieceMoving(row, col) ? 'piece-moving' : '',
                     isPieceCapturing(row, col) ? 'piece-capturing' : '',
                     isPieceChecked(row, col) ? 'piece-checked' : '',
                     isPiecePromoting(row, col) ? 'piece-promoting' : ''
                   ]"
                   :src="getPieceImagePath(localBoardMatrix[row][col])"/>
          </template>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'BaseBoard',
  props: {
    boardMatrix: {
      type: Array,
      required: true,
      validator: value => Array.isArray(value) && value.length === 8 && value.every(row => Array.isArray(row) && row.length === 8),
      default: () => Array(8).fill().map(() => Array(8).fill(null))
    },
    selectedPiece: {
      type: Object,
      default: () => null
    },
    possibleMoves: {
      type: Array,
      validator: value => Array.isArray(value),
      default: () => []
    },
    checkedKing: {
      type: Object,
      default: () => null
    },
    movingPiece: {
      type: Object,
      default: () => null
    },
    capturingPiece: {
      type: Object,
      default: () => null
    },
    promotingPiece: {
      type: Object,
      default: () => null
    }
  },
  data() {
    return {
      localBoardMatrix: this.boardMatrix.map(row => [...row])
    }
  },
  watch: {
    boardMatrix(newVal) {
      this.localBoardMatrix = newVal.map(row => [...row])
    }
  },
  methods: {
    onSquareClick(row, col) {
      this.$emit('square-click', { row, col })
    },
    isSquareSelected(row, col) {
      return this.selectedPiece && 
             this.selectedPiece.row === row && 
             this.selectedPiece.col === col
    },
    isMovePossible(row, col) {
      return this.possibleMoves.some(move => 
        move.row === row && move.col === col
      )
    },
    isKingInCheck(row, col) {
      return this.checkedKing && 
             this.checkedKing.row === row && 
             this.checkedKing.col === col
    },
    isPieceMoving(row, col) {
      return this.movingPiece && 
             this.movingPiece.row === row && 
             this.movingPiece.col === col
    },
    isPieceChecked(row, col) {
      return this.checkedKing && 
             this.checkedKing.row === row && 
             this.checkedKing.col === col
    },
    isPieceCapturing(row, col) {
      return this.capturingPiece && 
             this.capturingPiece.row === row && 
             this.capturingPiece.col === col
    },
    isPiecePromoting(row, col) {
      return this.promotingPiece && 
             this.promotingPiece.row === row && 
             this.promotingPiece.col === col
    },
    getPieceImagePath(piece) {
      if (!piece) return ''
      return `../../static/images/pieces/${piece.color}_${piece.type}.png`
    }
  }
}
</script>

<style src="./base-board.css"></style>